<!--
盒模型
    每一个HTML元素就相当于是一个矩形的 盒子
    这个盒子由这几个部分构成
        边框 border
        内容 content
        内边距 padding
        外边距 margin


    边框基础属性:
        粗细：border-width
        样式：border-style,默认没有边框.
            solid 实线边框 dashed 虚线边框 dotted 点线边框
        颜色：border-color
    以上属性会撑大盒子，即为 内容(原本设置的大小)+ 边框=最终实现的大小
    通过 box-sizing属性可以修改浏览器的行为，使边框不会撑大盒子
        box-sizing:border-box;

-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
    <style>

        div{
            width:200px;
            height: 200px;


            /* border-color: aqua;
            border-width: 10px;
            border-style: solid; */
            border: 10px solid aqua;
            
            box-sizing: border-box;/* 不会撑大盒子 */
        }



    </style>
<body>
    <div>

    </div>
</body>
</html>